import React, { useEffect } from 'react';
import { Link, Outlet, history } from 'umi';
import styles from './Common.less';
import 'remixicon/fonts/remixicon.css';
import { Button, Menu, Avatar, Dropdown } from 'antd';
import config from '../config/config';
import { useGlobalShare } from '../models/globalShare';
import { useGlobalState } from '../models/globalState';
import moment from 'moment';
import LoginPage from "./login/LoginPage";

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;

const ModuleLayout = () => {

    const { themeColor, currentUser, setCurrentUser } = useGlobalShare();
    const {
        collapsed, setCollapsed,
        mainMenuKey, setMainMenuKey,
        sideMenuKey, setSideMenuKey,
        useDefalutMenuKey
    } = useGlobalState()
    console.log("Layout mainMenuKey => " + mainMenuKey + " sideMenuKey => " + sideMenuKey + " themeColor => " + themeColor);

    useEffect(() => {
        let user = sessionStorage.getItem("currentUser");
        user = JSON.parse(user);
        if (!user || user && Object.keys(user).length == 0) {
            history.push("/");
        }
        setCurrentUser(user);

        useDefalutMenuKey(window.location.pathname);
    }, []);

    const onLinkMenu = (type) => {
        if ("detail" == type) {
            setMainMenuKey("taixu");
            setSideMenuKey("detail");
        } else if ("setting" == type) {
            setMainMenuKey("home");
            setSideMenuKey("setting");
        }
    }

    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };

    const onClickMainMenu = (props) => {
        setMainMenuKey(props.key);

        const sideMenu = config.menu_side[props.key][0];
        let sideMenuKey = sideMenu.key, sideMenuLink = sideMenu.link;
        if (sideMenu.children) {
            let child = sideMenu.children[0];
            sideMenuKey = child.key;
            sideMenuLink = child.link;
        }
        setSideMenuKey(sideMenuKey);
        history.push(sideMenuLink);
    }

    const onClickSideMenu = (props) => {
        setSideMenuKey(props.key);

        let sideMenuLink = "";
        let sideMenus = config.menu_side[mainMenuKey];
        for (let i = 0; i < sideMenus.length; i++) {
            let sideMenu = sideMenus[i];
            if (sideMenu.key == props.key) {
                sideMenuLink = sideMenu.link;
                break;
            }

            let children = sideMenu.children;
            if (children) {
                for (let j = 0; j < children.length; j++) {
                    if (children[j].key == props.key) {
                        sideMenuLink = children[j].key;
                        break;
                    }
                }
            }
        }
        history.push(sideMenuLink);
    }

    const iconStyleUserInfo = {
        paddingRight: "5px",
        fontSize: "16px",
    }

    const logout = () => {
        history.push("/");
        window.location.pathname = "/";
        sessionStorage.setItem("currentUser", null);
    }

    const dropdownInfoOptions = (
        <div style={{ marginTop: "-8px", boxShadow: "0px 0px 5px #d9d9d9bf", padding: "20px", background: "#ffffff" }}>
            <div style={{background: themeColor, height: "165px", textAlign: "center", padding: "20px 0px 10px 0px"}}>
                <Avatar size={80} src={currentUser?.photo} icon={<i className={"ri-user-line"} />} />
                <div style={{marginTop: "10px"}}>
                    <span style={{ fontWeight: "bolder" }}>{currentUser?.user_name}</span>
                    <span style={{ marginLeft: "20px" }}>系统管理员</span>
                    <div>{currentUser?.phone_number}</div>
                    <div>{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}</div>
                </div>
            </div>
            <Button type="dashed" style={{ width: "100%", textAlign: "center", margin: "20px 0px 20px 0px" }} onClick={() => {}}>
                <Link to={"/setting"} state={{ "activeKey": "person" }} onClick={() => onLinkMenu("setting")} style={{ textDecoration: "none" }}>
                    <i className="ri-shield-user-line" style={iconStyleUserInfo}></i>&nbsp;个人中心
                </Link>
            </Button>
            <Button type="dashed" style={{ width: "100%", textAlign: "center" }} onClick={() => logout()}>
                <i className="ri-logout-circle-r-line" style={iconStyleUserInfo}></i>&nbsp;退出系统
            </Button>
        </div>
    );

    let width = window.innerWidth;
    let height = window.innerHeight;
    let iconPadding = 10 + (collapsed ? 12 : 0);

    const pathname = window.location.pathname;
    console.log("Layout pathname => ", pathname);

    return (
        <div className={styles.main_content_div} style={{ width, height }}>
            {
                "/" === pathname ? <LoginPage /> :
                    <div style={{ height: "100%", width: "100%" }}>
                        <div style={{ height: "60px", width: "100%", display: "flex", flexDirection: "row", background: themeColor }}>
                            <div style={{ display: "flex", flexDirection: "row" }}>
                                <div style={{ padding: "11px 0px 0px 20px" }}>
                                    <i className="ri-slack-fill" style={{ fontSize: 35 }} />
                                </div>
                                <div style={{ padding: "16px 0px 0px 5px", fontSize: 18 }}>{config.name}</div>
                            </div>
                            <div style={{ padding: "0px 15px 0px 25px" }}>
                                <Button onClick={toggleCollapsed} style={{ fontSize: 20, background: themeColor, border: "0px", height: "60px", width: "35px" }}>
                                    {
                                        collapsed ? <i className="ri-indent-decrease" style={{ margin: "2px 0px 0px 0px" }} />
                                            : <i className="ri-indent-increase" style={{ margin: "2px 0px 0px 0px" }} />
                                    }
                                </Button>
                            </div>
                            <div style={{ width: "70%" }} className={styles.main_menu_item}>
                                <Menu
                                    theme=""
                                    mode="horizontal"
                                    selectedKeys={[mainMenuKey]}
                                    defaultSelectedKeys={[mainMenuKey]}
                                    onClick={props => onClickMainMenu(props)}
                                >
                                    {
                                        config.menu_main.map(item =>
                                            <MenuItem key={item.key} style={{ background: mainMenuKey == item.key ? "#3364ed4d" : null }}>
                                                <i className={item.icon} style={{ fontSize: 16, paddingRight: 10 }} />{item.name}
                                            </MenuItem>)
                                    }
                                </Menu>
                            </div>
                            <div style={{ margin: "18px 0px 0px 0px", position: "absolute", right: "110px" }}>
                                <Link to={"/setting"} state={{ "activeKey": "style" }} onClick={() => onLinkMenu("setting")} style={{ textDecoration: "none" }}><i className="ri-settings-line" style={{ fontSize: "22px" }} /></Link>
                            </div>
                            <div style={{ margin: "18px 0px 0px 0px", position: "absolute", right: "70px" }}>
                                <Link to={"/detail"} onClick={() => onLinkMenu("detail")} style={{ textDecoration: "none" }}><i className="ri-question-line" style={{ fontSize: "22px" }} /></Link>
                            </div>
                            <div style={{ margin: "13px 0px 0px 0px", position: "absolute", right: "15px" }}>
                                <Dropdown overlay={dropdownInfoOptions} trigger={['click']} overlayClassName={styles.menu_status_login_person}>
                                    <Avatar size={35} src={currentUser?.photo} style={{ background: "#0000ff30" }}>
                                        <i className="ri-user-2-fill" style={{ fontSize: 22 }} />
                                    </Avatar>
                                </Dropdown>
                            </div>
                        </div>
                        <div style={{ width: window.innerWidth, height: height - 100, display: "flex", flexDirection: "row" }}>
                            <Menu
                                theme=""
                                mode="inline"
                                selectedKeys={[sideMenuKey]}
                                inlineCollapsed={collapsed}
                                className={styles.sider_menu_div}
                                onClick={props => onClickSideMenu(props)}
                                defaultSelectedKeys={[config.menu_side["home"][0].key]}
                                defaultOpenKeys={["rag_pattern", "rag_apply", "agent_pattern", "agent_apply"]}
                                style={{ maxWidth: collapsed ? 70 : 200, minWidth: collapsed ? 70 : 200, overflow: "auto" }}
                            >
                                {
                                    config.menu_side[mainMenuKey]?.map(item =>
                                        item.children ?
                                            <SubMenu key={item.key} title={<span><i className={item.icon} style={{ fontSize: 16, paddingRight: iconPadding }} />{item.name}</span>}>
                                                {
                                                    item.children.map(subItem =>
                                                        <MenuItem key={subItem.key} style={{ background: sideMenuKey == subItem.key ? "#9e9e9e1a" : null }}>
                                                            <Link to={subItem.link}>
                                                                <i className={subItem.icon} style={{ fontSize: 16, paddingRight: iconPadding }} />
                                                                <span style={{ color: "black" }}>{subItem.name}</span>
                                                            </Link>
                                                        </MenuItem>
                                                    )
                                                }
                                            </SubMenu> :
                                            <MenuItem key={item.key} style={{ background: sideMenuKey == item.key ? "#9e9e9e1a" : null }}>
                                                <Link to={item.link}>
                                                    <i className={item.icon} style={{ fontSize: 16, paddingRight: iconPadding }} />
                                                    <span style={{ color: "black" }}>{item.name}</span>
                                                </Link>
                                            </MenuItem>)
                                }
                            </Menu>
                            <div style={{ width: window.innerWidth - (collapsed ? 110 : 200), height: window.innerHeight - 140, padding: 20, background: "#9e9e9e1a" }}>
                                <Outlet />
                            </div>
                        </div>
                        <div style={{ height: "40px", width: "100%", background: themeColor, textAlign: "center" }}>
                            <div style={{ padding: "7px 0px 0px 0px" }}>
                                {config.name} <i className="ri-copyright-fill" style={{ fontSize: 18 }} /> 2025-2045 By xuesjie
                            </div>
                        </div>
                    </div>
            }
        </div>
    );
}

export default ModuleLayout;
